<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改课件管理')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-ware-edit" th:object="${teachingCourseWare}">
        <input name="wareId" th:field="*{wareId}" type="hidden">

        <div class="form-group">
            <label class="col-sm-3 control-label">目录：</label>
            <div class="col-sm-8">
                <input name="courseId" th:field="*{courseId}" class="form-control" type="hidden">
                <input name="courseName" th:field="*{courseName}" class="form-control" type="hidden">
                <input name="folderId" th:field="*{folderId}" class="form-control" type="hidden">
                <input name="folderName" th:field="*{folderName}" class="form-control" onclick="selectFolderTree()"
                       type="text" readonly required>

            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">课件名称：</label>
            <div class="col-sm-8">
                <select name="isWare" class="form-control m-b">
                    <option value="0" th:selected="${teachingCourseWare.isWare} eq '0'">否</option>
                    <option value="1" th:selected="${teachingCourseWare.isWare} eq '1'">是</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">课件名称：</label>
            <div class="col-sm-8">
                <input name="wareName" th:field="*{wareName}" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">缩略图：</label>
            <div class="col-sm-8">
                <img style="width: 100px" th:src="*{thumb}"/>
                <input id="thumb" name="thumb" th:field="*{thumb}" type="hidden">
                <div class="fileinput fileinput-new" data-provides="fileinput">
                    <div class="fileinput-preview thumbnail" data-trigger="fileinput"
                         style="width: 200px; height: 150px;"></div>
                    <div>
                        <span class="btn btn-white btn-file">
                            <span class="fileinput-new">选择图片</span>
                            <span class="fileinput-exists">更改</span>
                            <input id="thumbFile" type="file"/>
                        </span>
                        <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">文件上传：</label>
            <div class="col-sm-8">
                <input id="filePath" type="hidden" name="filePath" th:field="*{filePath}">
                <input class="form-control file-upload" id="file" name="file" type="file">
            </div>
        </div>

    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<!--<th:block th:include="include :: bootstrap-fileinput-js"/>-->
<th:block th:include="include :: jasny-bootstrap-js"/>
<script th:inline="javascript">
    var courseId = [[${teachingCourseWare.courseId}]];
    var prefix = ctx + "teaching/ware";
    $("#form-ware-edit").validate({
        focusCleanup: true
    });
    var initImg = [[${teachingCourseWare.thumb}]];
    console.log(initImg);
    $('#thumbFile').fileinput({initialPreview: [initImg]});

    function submitHandler() {
        if ($.validate.form()) {
            if ($.validate.form()) {
                var formData = new FormData();
                // console.log($('#thumbFile')[0]);
                if ($('#thumbFile')[0].files == null && $("thumb").val() == '') {
                    $.modal.alertWarning("请先选择缩略图");
                    return false;
                }
                if ($('#file')[0].files == null && $("filePath").val() == '') {
                    $.modal.alertWarning("请先选择文件路径");
                    return false;
                }
                formData.append("wareId", $("#wareId").val());
                formData.append("courseId", $("#courseId").val());
                formData.append("courseName", $("#courseName").val());
                formData.append("folderId", $("#folderId").val());
                formData.append("folderName", $("#folderName").val());
                formData.append("wareName", $("#wareName").val());
                formData.append("thumb", $("#thumb").val());
                if ($('#thumbFile')[0].files != null) {
                    formData.append("thumbFile", $('#thumbFile')[0].files[0]);
                }
                formData.append("filePath", $('#filePath').val());
                if ($('#file')[0].files != null) {
                    formData.append("file", $('#file')[0].files[0]);
                }
                $.ajax({
                    url: prefix + "/edit",
                    type: 'post',
                    cache: false,
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    success: function (result) {
                        console.log(result)
                        $.operate.successCallback(result);
                    }
                });
                // $.operate.save(prefix + "/edit", $('#form-ware-edit').serialize());
            }
        }
    }

    /*课程目录-新增-选择父课程目录树*/
    function selectFolderTree() {
        console.log($("#folderId").val());
        var options = {
            title: '课程目录选择',
            width: "380",
            url: ctx + "teaching/folder/selectFolderTree/" + $("#folderId").val() + "?courseId=" + courseId,
            callBack: doSubmit
        };
        $.modal.openOptions(options);
    }

    function doSubmit(index, layero) {
        var body = $.modal.getChildFrame(index);
        $("#folderId").val(body.find('#treeId').val());
        $("#folderName").val(body.find('#treeName').val());
        $.modal.close(index);
    }

    // $(".file-upload").each(function (i) {
    //     var val = $("input[name='" + this.id + "']").val()
    //     $(this).fileinput({
    //         'uploadUrl': ctx + 'common/upload',
    //         initialPreviewAsData: true,
    //         initialPreview: [val],
    //         maxFileCount: 1,
    //         autoReplace: true
    //     }).on('fileuploaded', function (event, data, previewId, index) {
    //         $("input[name='" + event.currentTarget.id + "']").val(data.response.url)
    //     }).on('fileremoved', function (event, id, index) {
    //         $("input[name='" + event.currentTarget.id + "']").val('')
    //     })
    //     $(this).fileinput('_initFileActions');
    // });
</script>
</body>
</html>
